<form method="post" class="form-checklist">
<div id="navbar1" class="navbar1 header-user-checklist clearfix">
	<div class="site-wrap2 clearfix medium">
		<div class="logoPhoto bigger pull-left"><a href="#"></a></div>
	</div>
	<div class="notice-user-box notice-top">
		<div class="site-wrap1">
			<div class="box-ctn-l pull-left">
				<h3>Xin chào! <span>{$ocUser.user_fullname}</span></h3>
				<p>Chào mừng bạn đã đến với 9PM. Xin mời bạn hãy chọn những lĩnh vực mà bạn muốn quan tâm <i>(Tối thiểu 5 lĩnh vực)</i></p>
			</div>
			<div class="box-btn-r pull-right">
				<a href="#"><span class="btn-next">Lưu lại</span></a>
			</div>
		</div>
	</div>
</div>
<div class="site-wrap2 clearfix" style="padding-bottom:100px">
<div class="clearfix"> 
	<div class="box-type-care">
		<ul class="list-type-care clearfix">
			{foreach from=$aCat item=cat key=id}
			{if $id!=23}
			<li>
				<div class="type-care type-sm{$id} {if $userCheck[$id]}actived{/if}">
					<a href="javascript:void(0)" class="animated-button red pulse">
						<div class="icon"><i class="icon-heart un-check"></i><i class="icon-ok check"></i></div>
						<div class="content">
							<div class="title">{$cat}</div>
							<i class="icon-type-sm type-sm{$id}"></i>
						</div>
					</a>
					<input type="checkbox" class="checkbox" name="user_checklist[]" value="{$id}" {if $userCheck[$id]}checked="checked"{/if} />
				</div>
			</li>
			{/if}
			{/foreach}
		</ul>
	</div>
</div>
</form>

{literal}
<script>
$(function (){
	$( '.type-care' ).click(function(event) {
		$(this).toggleClass("actived");
		var checkBox = $(".checkbox", this);
		checkBox.prop("checked", !checkBox.prop("checked"));
  });
  
  $('.form-checklist .btn-next').click(function (e){
  	e.preventDefault();
  	$(this).parents('form').submit();
  });
  
  $('.form-checklist').submit(function (e){
  	if ($('.type-care .checkbox:checked').length<5){
  		e.preventDefault();
  		alert('Bạn vui lòng chọn tối thiểu 5 lĩnh vực!');
  		return;
  	}
  })
});
</script>
{/literal} 